<div class="farris-form-controls-inline p-2">

    <div class="farris-group-wrap col-6">
        <div class="form-group farris-form-group">
            <label class="col-form-label">
                <span class="farris-label-text">已选图标</span>
            </label>
            <div class="farris-input-wrap position-relative">
                <input type="input" class="form-control" [(ngModel)]="fIconName" (ngModelChange)="changeFIconName()">
                <span class="{{'mr-2 selectedIcon f-icon ' + fIconName}}"></span>

            </div>
        </div>
    </div>
    <div class="farris-group-wrap col-6" *ngIf="editorParams && editorParams.needIconClass">
        <div class="form-group farris-form-group">
            <label class="col-form-label">
                <span class="farris-label-text">图标样式</span>
            </label>
            <div class="farris-input-wrap">
                <input type="input" class="form-control" [(ngModel)]="iconClass">
            </div>
        </div>
    </div>
</div>
<div class="search w-100">
    <div class="position-relative mr-3">
        <input class='form-control pr-4' [(ngModel)]="searchIconName" (keyup)="searchIcon()" />
        <i class="fa fa-search"></i>
    </div>
</div>
<div class="flex-fill f-utils-overflow-auto pl-1">
    <div class="ficon-container" *ngFor="let icon of searchedIconList; let i = index" (click)="clickIcon(icon)"
        [ngClass]="icon===selectedIcon? 'selecteIcon':''">
        <span class="{{'f-icon f-icon-'+icon}}"></span>
        <p class="ficon-text">{{icon}}</p>
    </div>
</div>

<ng-template #bindingFooter>
    <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
    <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>